<template>
  <div>
    <!-- 搜索框开始 -->
    <el-row class="ssk1">
      <el-col :span="8"><div class="grid-content bg-purple" />
        <span class="spm">商品名：</span>
        <el-input v-model="search.input" placeholder="请输入内容" class="spmsrk" />
      </el-col>
      <el-col :span="8">
        <span>类别：</span>
        <el-select v-model="search.type" placeholder="请选择">
          <el-option
            v-for="item in tableData4"
            :key="item.id"
            :label="item.storetype"
            :value="item.storetype"
          />
        </el-select>
      </el-col>
      <el-col :span="8">
        <span>所属店铺：</span>
        <el-select v-model="search.store" placeholder="请选择">
          <el-option
            v-for="item in tableData5"
            :key="item.id"
            :label="item.storeblone"
            :value="item.storeblone"
          />
        </el-select>
      </el-col>
    </el-row>
    <!-- 搜索框结束 -->
    <!-- 搜索按钮开始 -->
    <el-row :gutter="20" class="ssk2">
      <el-col :span="16">
        <el-button type="primary" @click="appear = true">+ 新建</el-button>
        <el-button type="primary" @click="open1">导入</el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="Thequery">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <!-- 搜索按钮结束 -->
    <!-- 警示条开始 -->
    <el-alert
      title="已选择4项 总价值：36.4万 清空"
      type="info"
      show-icon
    />
    <!-- 警示条结束 -->

    <!-- 表格开始 -->
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="storenumber"
        label="商品编号"
        width="80"
      />
      <el-table-column
        prop="storename"
        label="商品名"
        width="120"
      />
      <el-table-column
        prop="storeblone"
        label="所属店铺"
        width="180"
      />
      <el-table-column
        prop="goodsimage"
        label="商品图"
        width="180"
      >
        <template #default="{row}">
          <img :src="row.goodsimage" class="image">
        </template>
      </el-table-column>
      <el-table-column
        prop="storetype"
        label="类型"
        width="180"
      />
      <el-table-column
        prop="costprice"
        label="成本价"
        width="120"
      />
      <el-table-column
        prop="originalcost"
        label="原价"
        width="120"
      />
      <el-table-column
        prop="saleprice"
        label="销售价"
        width="120"
      />
      <el-table-column
        prop="stock"
        label="库存量"
        width="120"
      />
      <el-table-column
        prop="monthlysales"
        label="月销售量"
        width="120"
      />
      <el-table-column
        prop="totalsales"
        label="总销售量"
        width="120"
      />
      <el-table-column
        prop="monthlyvolume"
        label="月销额"
        width="120"
      />
      <el-table-column
        prop="totalvolume"
        label="总销售额"
        width="120"
      />
      <el-table-column
        prop="activity"
        label="参与活动"
        width="120"
      />
      <el-table-column
        prop="salelike"
        label="是否热销"
        width="120"
      />
      <el-table-column
        prop="recommend"
        label="是否推荐"
        width="120"
      />
      <el-table-column
        prop="state"
        label="状态"
        width="120"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="200"
      >
        <template #default="{row}">
          <el-button type="text" size="small" @click="posthoplist(row)">{{ row.state }}</el-button>
          <el-button type="text" size="small" @click="deletetel(row.id)">删除</el-button>
          <el-button type="text" size="small" @click="theeditor(row.id)">编辑</el-button>
          <el-button type="text" size="small" @click="switchs(row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 详情菜单 -->
    <el-drawer
      title="商品详情"
      :visible.sync="drawer"
      :direction="fangxiang"
      destroy-on-close
      size="660px"
    >
      <goods-details :obtainid="tableData2" />
      <!-- :details="tableData2" -->
    </el-drawer>
    <!-- 新建商品 -->
    <new-goods :appear.sync="appear" />
    <!-- 编辑商品 -->
    <edit-component :appear.sync="appear2" :form.sync="tableData2" />
    <!-- 分页 -->
    <el-row>
      <el-col :span="10">
        <span>共{{ total }}条记录 第{{ qureInfo._page }}/{{ total/qureInfo._limit }}页</span>
      </el-col>
      <el-col :span="14">
        <el-pagination
          background
          :current-page="qureInfo._page"
          :page-sizes="[2, 3, 5, 10]"
          :page-size="qureInfo._limit"
          layout="  prev, pager, next,sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getShoplist2, getShoplist3, getShoplist4, getShoplist5, getShoplist8, getShoplist9, getShoplist11 } from '@/api/getShoplist';
// 导入商品详情组件
import GoodsDetails from './goodsdetails';
// 导入商品详情组件
import NewGoods from './newgoods';
// 导入商品详情组件
import EditComponent from './editcomponent';
export default {
  name: 'TabularForm',
  components: {
    GoodsDetails,
    NewGoods,
    EditComponent,
  },
  data() {
    return {
      drawer: false, // 商品详情显示与隐藏
      fangxiang: 'rtl', // 商品详情弹出方向
      appear: false, // 新建显示与隐藏
      appear2: false, // 编辑显示与隐藏
      tableData: [], // 所以商品数据
      tableData2: {}, // 商品详情数据
      tableData4: [], // 商品分类列表
      tableData5: [], // 商铺列表
      qureInfo: {
        _page: 1, // 当前页码值
        _limit: 3, // 每页显示条数
      },
      total: 0,
      search: {
        input: '', // 输入框（商品名
        store: '', // 商店
        type: '', // 类型
      },
    };
  },
  created() {
    this.getShoplist();
    this.getclassification();
  },
  methods: {
    // 请求数据渲染列表
    async getShoplist() {
      const data = await getShoplist2(this.qureInfo);
      // console.log(data);
      this.total = data.headers['x-total-count'] - 0;
      this.tableData = data.data;
      // console.log(this.tableData);
    },
    async getclassification() {
      // 请求分类列表数据
      const data = await getShoplist4();
      this.tableData4 = data.data;
      // 请求获取商铺列表数据
      const datas = await getShoplist5();
      this.tableData5 = datas.data;
    },
    // 查询
    async Thequery() {
      // 请求数据
      if (this.search.input === '') {
        this.getShoplist();
      } else {
        const { data } = await getShoplist11(this.search);
        // console.log(data);
        // 将得到的数据赋值给tableData2
        this.tableData = data;
        console.log(this.tableData);
      }
    },
    // 重置事件
    async reset() {
      this.search.input = '';
      this.search.type = '';
      this.search.store = '';
      this.getShoplist();
    },
    // 新建按钮点击事假
    async handleClose() {
      this.appear = true;
    },
    // 编辑按钮点击事件
    async theeditor(id) {
      const { data } = await getShoplist3(id);
      this.tableData2 = data;
      console.log(this.tableData2);
      this.appear2 = true;
    },
    // 分页
    handleSizeChange(val) {
      this.qureInfo._limit = val;
      this.getShoplist();
    },
    // 分页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.qureInfo._page = val;
      this.getShoplist();
    },
    // 请求改商品状态
    async posthoplist(data) {
      // 对数据进行判断
      if (data.state === '上架') {
        data.state = '下架';
        // 发起请求更改数据
        await getShoplist8(data);
        // 重新获取新数据
        this.getShoplist();
        this.promptdown();
      } else {
        data.state = '上架';
        // 发起请求更改数据
        await getShoplist8(data);
        // 重新获取新数据
        this.getShoplist();
        this.promptup();
      }
    },
    // 删除商品
    async deletetel(id) {
      const data = await getShoplist9(id);
      console.log(data);
      this.getShoplist();
    },
    // 显示商品详情
    async switchs(id) {
      // 请求数据
      const { data } = await getShoplist3(id);
      // console.log(data);
      // 将得到的数据赋值给tableData2
      this.tableData2 = data;
      console.log(this.tableData2);
      // 显示右侧抽屉组件
      this.drawer = true;
    },
    // 施工中。。。
    async open1() {
      this.$notify({
        title: '施工中。。。',
        message: '莫挨老子，该功能正在开发中，敬请期待!',
        type: 'warning',
      });
    },
    // 下架
    async promptup() {
      this.$message({
        message: '上架成功！',
        type: 'success',
      });
    },
    // 下架
    async promptdown() {
      this.$message({
        message: '下架成功！',
        type: 'success',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.spmsrk{
  width: 200px;
}
.ssk1,.ssk2{
  margin-bottom: 20px;
}
.image{
  width: 120px;
  height: 120px;
}
</style>
